// 解构  React Hooks
import React, { useState } from 'react';

// 一个函数返回一段JSX
const APP = () => {
  // let name = '计涛';
  // state 状态
  // 当前组件添加一个状态 默认值
  // console.log(useState(1))
  // 解构
  let [isSingle,setIsSingle] = useState(true);// 单身
  let [name, setName] = useState('计涛'); // 给JSX带来状态 
  let [data, setDate] = useState(new Date().toLocaleTimeString())
  // JSX {} 占位符，简单用法 输出值，复杂用法 花括号内就是js的运行区域，结果默认输出
  setInterval(() => {
   setDate(new Date().toLocaleTimeString());
  }, 1000);
  const changeName = () =>{
    // console.log('lalalala')
    setName('k')
  }

  const friends = [{
    name:'涛',
    age:19
  },{
    name:'计',
    age:17
  }]
  return (
    <div>
      {/* JSX 简单高效的UI模板  状态+时间+......  React */}
      <p>{isSingle?<span>单身</span>:<span>有主</span>}</p>
      <h1>hello {name}</h1>
      <h2>显现在{data}</h2>
      <ul>
        {
          friends.map((friend,index) =><li key ={index}>{friend.name}- 
          {friend.age}</li>)
          
        }
      </ul>
      <button onClick={changeName}>显示英文名</button>
    </div>
  )
}

export default App 